<template>
  <div id="record">
    <!-- 无商品的展示图片 -->
    <img src="../../../assets/nullIcon/icon_null.png" alt="" class="no-data" v-if="!barginOrderList || barginOrderList.length == 0">
    <!-- 商品列表 -->
  	<table class="record" v-show="barginOrderList && barginOrderList.length > 0">
      <thead>
        <tr>
          <th>采购商</th><th>商品规格</th><th>数量</th><th>成交时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in barginOrderList">
          <td>
            <div class="head" :style="{'background-image': `url(${order.userHeadImg})`}"></div>
            <div class="name">{{order.buyName}}</div>
          </td>
          <td>
            <div class="spec" v-for="gsp in dealGoodsGsp(order.goodsGsp)">
              {{gsp.name}}: {{gsp.childs.join('/')}}
            </div>
          </td>
          <td>{{order.goodsTotalcount}}件</td>
          <td>{{order.payTime}}</td>
        </tr>
      </tbody>
    </table>
    <!-- 分页组件 -->
    <w-paging v-show="barginOrderList && barginOrderList.length > 0" :current="currentPage" :total="totalPage" @on-page="changeToNextPage"></w-paging>
  </div>
</template>

<script>
// 获取接口对象
import { apiBargainOrderForm } from '../../../common/api'

export default {
  data() {
    return {
      barginOrderList: '',
      currentPage: 1,
      totalPage: 1,
      pageSize: 10,
      goodsId: this.$route.params.id
    }
  },
  created() {
    this.handlerBargainOrderForm(this.goodsId)
  },
  methods: {
    /**
     * 获取商品成交记录
     */
    handlerBargainOrderForm(goodsId) {
      // 请求商品成交记录
      apiBargainOrderForm(goodsId, this.currentPage, this.pageSize).then((data) => {
        // 成交记录列表
        this.barginOrderList = data.resultList

        // 当前页
        this.currentPage = data.currentPage

        // 总页数
        this.totalPage = data.allPage
      })
    },

    /**
     * 跳转到下一页
     * @param  {Number} page 页码
     */
    changeToNextPage(page) {
      this.currentPage = page
      this.handlerBargainOrderForm(this.goodsId)
    },

    /**
     * 处理商品的属性
     * @param  { Object } gsp 商品的sku属性
     */
    dealGoodsGsp(gsp) {
      // 商品sku属性列表
      let item = []
      // 临时变量
      let filterItem = {}

      // 取出sku
      gsp.forEach((v) => {
        // 取出
        filterItem = item.filter((v1) => { return v1.name == v.goodsSpecContent[0] })

        //  如果没取到数据，则向数组中新赛数据
        if (!filterItem || filterItem.length == 0) {
          filterItem = [{ name: v.goodsSpecContent[0], childs: [] }]
          item = item.concat(filterItem)
        }

        // 将尺码放到孩子节点中
        filterItem[0].childs.push(v.goodsSpecContent[1])
      })
      return item
    }
  }
}
</script>

<style lang="scss" scoped>
.record {
  margin: 0px;
  padding: 0px;
  width: 100%;

  thead {
    font-size: 16px;
    
    tr {
      border-bottom: 1px solid #DDDDDD;

      th {
        padding: 16px;
        text-align: center;
      }
    }
  }
  tbody {
    tr {
      &:nth-child(odd) {
        background-color: #F6F6F6;
      }

      td {
        padding: 20px;
        text-align: center;

        .head {
          background-size: 100% 100%;
          width: 44px;
          height: 44px;
          margin: 0 auto;
        }
        .name {
          color: #444444;
          font-size: 14px;
          text-align: center;
          margin-top: 12px;
        }
        .spec {
          margin-bottom: 15px;
          text-align: center;

          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}
.no-data {
  width: auto;
  margin: 30px auto;
}
</style>